<template>
    <span class="tab-header-filter">
        <span class="tab-header-title">{{ title }}</span>
        <span class="tab-header-desc" v-if="sortable">
            <i class="tab-header-sort-caret tab-header-ascending"
                :class="sortableType === 'asc' && currentSort === props ? 'tab-header-ascending-active' : ''"
                @click="ascending"></i>
            <i class="tab-header-sort-caret tab-header-descending"
                :class="sortableType === 'desc' && currentSort === props ? 'tab-header-descending-active' : ''"
                @click="descending"></i>
        </span>
        <span class="tab-header-checkbox" v-if="filters.length > 0">
            <el-popover placement="bottom" title="筛选" width="160" trigger="click">
                <div class="scrollbar tab-header-checkbox-group">
                    <el-checkbox-group v-model="checkList" @change="filterCheckboxChange">
                    <p v-for="(item, index) in filters" :key="index"><el-checkbox :label="item.value">{{item.text}}</el-checkbox></p>
                </el-checkbox-group>
                </div>
                <div style="margin: 0">
                    <el-button size="mini" type="text" @click="clearFilter">重置</el-button>
                </div>
                <span slot="reference" :style="{marginLeft:(!sortable?'6px':'')}" class="tab-header-check-btn el-icon-arrow-down"
                    :class="checkList.length > 0 ? 'tab-header-check-btn-active' : ''"></span>
            </el-popover>
        </span>
    </span>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: 'fileUpLoad',
    props: {
        filters: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: ''
        },
        sortable: {
            type: Boolean,
            default: false
        },
        currentSort: {
            type: String,
            default: ''
        },
        props: {
            type: String,
            default: ''
        },
        filterChange: {
            type: Function,
            default: function () { }
        }
    },
    computed: {
        ...mapState({
            clearFilterCode: (state) => state.app.clearFilterCode
        }),
    },
    data() {
        return {
            checkList: [],
            sortableType: ''
        };
    },
    watch: {
        clearFilterCode(val) {
            this.checkList = [];
        },
        currentSort: function (val) {
            if (val != this.props) {
                this.sortableType = '';
            }
        }
    },
    created() {
        if (this.fileUrl) {
            this.fileString = this.fileUrl;
        }
    },
    methods: {
        //身份证正面上传成功
        filterCheckboxChange() {
            this.filterChange(this.props, 'checkBox', this.checkList);
        },
        ascending() {
            this.sortableType = 'asc';
            this.filterChange(this.props,'sort','asc');
        },
        descending() {
            this.sortableType = 'desc';
            this.filterChange(this.props,'sort','desc');
        },
        clearFilter(){
            this.checkList = [];
            this.filterChange(this.props, 'checkBox', []);
        }
    }
};
</script>

<style scoped>
.tab-header-filter {}

.tab-header-title {
    font-size: 12px;
    color: #909399;
}

.tab-header-desc {
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 34px;
    width: 24px;
    vertical-align: middle;
    cursor: pointer;
    overflow: initial;
    position: relative;
}

.tab-header-sort-caret {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    position: absolute;
    left: 7px;
}

.tab-header-ascending {
    border-bottom-color: #C0C4CC;
    top: 5px;
}

.tab-header-descending {
    border-top-color: #C0C4CC;
    bottom: 7px;
}

.tab-header-ascending-active {
    border-bottom-color: #409EFF !important;
}

.tab-header-descending-active {
    border-top-color: #409EFF !important;
}

.tab-header-check-btn-active {
    color: #409EFF !important;
}

.tab-header-check-btn {
    display: inline-block;
    line-height: 34px;
    cursor: pointer;
}

.tab-header-checkbox-group {
    max-height: 400px;
}
</style>